Avatar component

The Avatar component is used to represent a user, and displays the profile picture, initials or an icon.

Image Avatar

To use image avatar add class name avatarinside the img tag. For sizes add class name according to size avatar-sm, avatar-md, avatar-lg.If size is not provided default size would be used.

profile-photo profile-photo profile-photo profile-photo

Text avatar

You can use initial letters of user in avatar as well. To use text avatar add class name avatar-variantalong with avatar.

SM
SM
SM

Square avatar

To use square avatar add avatar-sqclass name along with avatar.

SM
SM
profile-photo profile-photo

Icon avatar

To use icon avatar include the icon in the divtag along with the class name avatar, avatar-variantand size of your choice.

Avatar with text

To use avatar with text wrap the content in avatar-text-wrapper

profile-photo
Profile username
View Profile